<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>空运时效表</span>
      </div>
      <el-form v-model="searchForm" size="mini" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <div slot="label">入库时间：</div>
                  <el-date-picker
                    v-model="searchForm.instockTimeRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item>
                  <div slot="label">渠道：</div>
                  <el-select
                    v-model="searchForm.instockChannelIds"
                    multiple
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, value) in channelMap"
                      :key="value"
                      :label="item"
                      :value="parseInt(value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics">
              统计
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="4">
        <el-col :span="8" v-for="(item, index) in chartData" :key="index">
          <el-card class="margin-bottom-sm">
            <el-row>
              <el-col :span="14">
                <pie-chart :chart-data="item" />
              </el-col>
              <el-col :span="10">
                <el-table size="mini" :data="item" stripe>
                  <el-table-column
                    label="时效"
                    prop="name"
                    min-width="33%"
                  ></el-table-column>
                  <el-table-column
                    label="票数"
                    prop="value"
                    min-width="33%"
                  ></el-table-column>
                  <el-table-column
                    label="票数占比"
                    prop="value"
                    min-width="33%"
                  >
                    <template slot-scope="scope">
                      {{ percentage(scope.row.value, index) }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import PieChart from "./components/PieChart";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      loading: false,
      searchForm: {
        instockTimeRange: [],
        instockChannelIds: []
      },
      data: {
        FTW1: {
          "<=7天": 3,
          "8天": 2,
          "9天": 8,
          "10天": 2,
          "11天": 4,
          "13天": 7,
          "14天": 3,
          ">=15天": 16
        }
      },
      chartData: [],
      chartDataTotal: [],
      channelMap: {
        1: 1,
        2: "ed"
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { data } = await ajax("initData", {});
      console.log("data", data);
      this.channelMap = data;
    },
    // 请求数据
    async statistics() {
      console.log("this.searchForm :>> ", this.searchForm);
      this.loading = true;
      const { code, data, message } = await ajax("toTimeLinessChart", {
        type: "air",
        startInStockTime: this.searchForm.instockTimeRange[0] || "",
        endInStockTime: this.searchForm.instockTimeRange[1] || "",
        instockChannelIds: this.searchForm.instockChannelIds || []
      });
      if (code !== 200) {
        this.$message.error(message);
        return;
      }
      let arr = [];
      for (const i in data) {
        let arr2 = [];
        for (const j in data[i]) {
          arr2.push({
            name: j,
            value: data[i][j],
            title: i
          });
        }
        arr.push(arr2);
      }
      console.log("arr :>> ", arr);
      this.loading = false;
      this.chartData = arr;
      this.totalVal();
    },
    // 计算总票数
    totalVal() {
      let arr = [];
      for (const i of this.chartData) {
        let num = 0;
        for (const j of i) {
          num += parseInt(j.value);
        }
        arr.push(num);
      }
      this.chartDataTotal = arr;
    },
    // 返回百分比
    percentage(v, index) {
      let num = ((v / this.chartDataTotal[index]) * 100).toFixed(2);
      return `${num}%`;
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-table--mini td,
.el-table--mini th {
  padding: 2px 0;
}
</style>
